<template>
  <Modal v-model="showModal" :width="width||80" :title="title" v-bind="$attrs">
    <div class="asyncModal-box">
      <slot></slot>
    </div>
    <div slot="footer">
      <Button @click="hide">取消</Button>
      <Button class="ml30" type="primary" @click="saveInfo">确定</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  props: ['title', 'width'],
  data() {
    return {
      showModal: false,
      callback: null,
    }
  },
  methods: {
    show(callback) {
      this.showModal = true
      this.callback = callback
    },
    hide() {
      this.showModal = false
    },

    async saveInfo() {
      if (this.callback) {
        await this.callback()
      }
      this.$emit('on-ok')
      this.hide()
    },
  },
}
</script>
<style lang="less"  scoped>
.asyncModal-box {
  max-height: 90vh;
  min-height: 20vh;
  overflow: auto;
}
</style>